<template>
  <div v-if="hasSearch || unit.keyword || hasOrder" class="flex flex-col gap1 p1 bg-#EEE">
    <div v-if="hasSearch || unit.keyword" class="flex">
      <div class="w50px">搜索:</div>
      <div class="flex gap1 flex-wrap">
        <el-tag v-if="unit.keyword" closable @close="onSearchKeyword('')">关键字：{{ unit.keyword }}</el-tag>
        <template v-for="(value, finalColumnAndOp) in unit.searchData" :key="finalColumnAndOp">
          <el-tag v-if="value" closable @close="onSearch(finalColumnAndOp)">
            {{ searchDataMap[finalColumnAndOp] }}{{ value }}
          </el-tag>
        </template>
      </div>
    </div>
    <div v-if="hasOrder" class="flex">
      <div class="w50px">排序:</div>
      <div class="flex gap1 flex-wrap">
        <el-tag v-for="(direction, finalColumn) in unit.orderData" :key="finalColumn" closable @close="onOrder(finalColumn)">
          按{{orderDataMap[finalColumn]}}{{ 'asc' == direction ? '升序' : '降序' }}
        </el-tag>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { computed, inject } from 'vue'
  import { ElTag } from 'element-plus'
  import { Unit } from '@/seed-application/types'
  import { unitKey } from '@/seed-application'

  const unit = inject<Unit>(unitKey, void 0)
  const orderDataMap = {
    order_code: '编码',
    order_name: '名称',
    'order_manager.name': '负责人'
  }

  const searchDataMap = {
    search_code_eq: '编码等于',
    search_name_like: '名称包含',
    'search_manager.name_like': '负责人姓名包含'
  }

  const hasSearch = computed(() => Object.values(unit.searchData).filter(e => e).length > 0)
  const hasOrder = computed(() => Object.keys(unit.orderData).filter(e => e).length > 0)

  const onSearchKeyword = (keyword) => {
    unit.keyword = keyword
    unit?.refresh?.()
  }

  const onSearch = (finalColumnAndOp) => {
    delete unit?.searchData[finalColumnAndOp]
    unit?.refresh?.()
  }

  const onOrder = (finalColumn) => {
    delete unit?.orderData[finalColumn]
    unit?.refresh?.()
  }
</script>